<template>
    <div class="context-menu" v-show="show" :style="style" @mousedown.stop @contextmenu.prevent>
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: "context-menu",
    data() {
        return {
            style: {}
        };
    },
    props: {
        offset: {
            type: Object,
            default: function () {
                return {
                    left: 0,
                    top: 0
                };
            }
        },
        show: Boolean
    },
    watch: {
        show(show) {
            if (show) {
                this.$nextTick(this.setPosition);
            }
        }
    },
    beforeDestroy() {
        let popperElm = this.$el;
        if (popperElm && popperElm.parentNode === document.body) {
            document.body.removeChild(popperElm);
        }
        document.removeEventListener("mousedown", this.clickDocumentHandler);
    },
    mounted() {
        document.body.appendChild(this.$el);
        document.addEventListener("mousedown", this.clickDocumentHandler);
    },
    methods: {
        clickDocumentHandler() {
            if (this.show) {
                this.$emit("update:show", false);
            }
        },
        setPosition() {
            let docHeight = document.documentElement.clientHeight;
            let docWidth = document.documentElement.clientWidth;
            let menuHeight = this.$el.getBoundingClientRect().height;
            let menuWidth = this.$el.getBoundingClientRect().width;
            // 增加点击处与菜单间间隔，较为美观
            const gap = 10;
            let topover =
                this.offset.top + menuHeight + gap >= docHeight
                    ? menuHeight + gap
                    : -gap;
            let leftover =
                this.offset.left + menuWidth + gap >= docWidth ? menuWidth + gap : -gap;
            this.style = {
                left: `${this.offset.left - leftover}px`,
                top: `${this.offset.top - topover}px`
            };
        }
    }
};
</script>
<style lang="scss" scoped>
.context-menu {
    position: absolute;
    background-color: #fff;
    width: 120px;
    /*height: 106px;*/
    font-size: 13px;
    color: #444040;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    white-space: nowrap;
    z-index: 1000;

    &-enter,
    &-leave-to {
        opacity: 0;
    }

    ;

    &-enter-active,
    &-leave-active {
        transition: opacity 0.5s;

        .context-menu-item {
            display: block;
            line-height: 34px;
            text-align: center;
        }

        .context-menu-item:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .context-menu-item :hover {
            cursor: pointer;
            background: #66b1ff;
            border-color: #66b1ff;
            color: #fff;
        }
    }
}
</style>